<!--
 * @name welcome
 * @description 组件描述
 * @author idouya
 * @email elegentfrog@163.com
 * @date 2025-07-01
 -->

<template>
  <div class="p-welcome common-welcome-2">
    <div class="project-info">
      <div class="item item-1" :style="item.includes('现代五项') ? 'width:80% !important' : ''">
        {{ item }}
      </div>
      <div class="item item-2">{{ venue }}</div>
    </div>
  </div>
</template>

<script setup>
import Storage from '@/assets/js/storage'
import Utils from '@/assets/js/utils'
import Config from '@/assets/js/config'
import { useMultiProcRequest } from '@/assets/js/useMultiProcRequest'

const { results, fetchForProcs } = useMultiProcRequest()

const { proxy } = getCurrentInstance()
const router = useRouter()
const route = useRoute()

const item = ref('马术')
const venue = ref(route.query.venue)
const procName = ref([])
const params = ref({})

onBeforeMount(() => {})
onMounted(() => {
  params.value = route.query
  procName.value = Config.procNameList[route.name]
  getData()
})

const getData = async () => {
  if (procName.value.length > 0) {
    fetchForProcs(procName.value, {
      procName: procName.value[0],
      keyValues: params.value,
    })
  }
}

watch(
  () => route.query,
  (val) => {
    params.value = val
    getData()
  }
)

watchEffect(() => {
  item.value = results.value.recordset?.[0]?.DisciplineName || '马术'
  venue.value = results.value.recordset?.[0]?.LocationName || '深圳市光明国际马术中心'
})
</script>

<style scoped lang="scss">
@import '@/assets/scss/scb/welcome';
</style>
